<template>
    <div class="srf-root" :data-namespace="srf.namespace" @dblclick="openDialog">
        <div class="srf-title">{{ srf.namespace }}</div>
        <div class="srf-title-meta">&lt;&lt;from: {{ srf.host }}:{{ srf.udpPort }}&gt;&gt;</div>
        <div class="srf-title-meta">&lt;&lt;created: {{ formatDateTime (srf.timestamp) }}&gt;&gt;</div>
        <div class="srf-title-meta" data-role="update-timestamp">&lt;&lt;updated: {{ formatDateTime (srf.lastUpdate) }}&gt;&gt;</div>
        <div class="srf-title-desc" v-if="srf.description">{{ srf.description }}</div>
    </div>
</template>

<script>
import '@/utils/functions';
export default {
    name: 'ServiceRouteFrame',
    props: {
        srf: {type: Object}
    },
    emits: ['open'],
    data () {
        return {};
    },
    methods: {
        openDialog () {
            this.$emit ('open', this.srf.namespace);
        },
        formatDateTime (timestamp) {
            return new Date (timestamp).format ('yyyy-MM-dd HH:mm:ss');
        }
    }
};
</script>